body	background: #fbffb9;
}
body, html{
	height: 100%;
}
/* code for the sun  */
#sun{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -150px;
	width: 300px;
	height: 300px;
}
#sun *, #sun *:before, #sun *:after{
	position: absolute;
}

/* code for the rings */
#rings{
	top: 50%;
	left: 50%;
	z-index: 1;
}
#rings div:before, #rings div:after{
	content: "";
	z-index: 2;
	top: 0;
	left: 0;
	height: inherit;
	width: inherit;
	background: inherit;
}
#rings div:before{
	transform: rotate(60deg);
}
#rings div:after{
	transform: rotate(-60deg);
}
#rings div:nth-child(even){
	animation: rotateR 12s infinite linear;
}
#rings div:nth-child(odd){
	animation: rotateL 12s infinite linear;
	transform: rotate(15deg);
}
#rings div:nth-child(1){
	animation-duration: 45s;
	backgrond: rgba(255, 230, 84, 0.5);
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;
}
#rings div:nth-child(2){
	animation-duration: 49s;
	background: rgba(255, 185, 6, 0.5);
	width: 190px;
	height: 190px;
	margin: -95px 0 0 -95px;
}
#rings div:nth-child(3){
	animation-duration: 56s;
	background: rgba(255, 130, 5, 0.5);
	width: 180px;
	height: 180px;
	margin: -90px 0 0 -90px;
}
#ringsv idiv:nth-child(4){
	animation-duration: 93s;
	background: rgba(255, 90, 0, 0.5);
	width: 170px;
	height: 170px;
	margin: -85px 0 0 -85px;
}

/* animations */
@-webkit-keyframes rotateR{
	from{
		-webkit-transform: rotate(0deg);
	}
	to{
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes rotateR{
	from{
		-moz-transform: rotate(0deg);
	}
	to{
		-moz-transform: rotate(360deg);
	}
}
@-ms-keyframes rotateR{
	from{
		-ms-transform: rotate(0deg);
	}
	to{
		-ms-transform: rotate(360deg);
	}
}
@-o-keygrames rotateR{
	from{
		-o-transform: rotate(0deg);
	}
	to{
		-o-transform: rotate(360deg);
	}
}
@keyframes rotateR{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}
@-webkit-keyframes rotateL{
	from{
		-webkit-transform: rotate(360deg);
	}
	to{
		-webkit-transform: rotate(0deg);
	}
}
@-moz-keyframes rotateL{
	from{
		-moz-transform: rotate(360deg);
	}
	to{
		-webkit-transform: rotate(0deg);
	}
}
@-ms-keyframes rotateL{
	from{
		-ms-transform: rotate(360deg);
	}
	to{
		-ms-transform: rotate(0deg);
	}
}
@-o-keyframes rotateL{
	from{
		-o-transform: rotate(360deg);
	}
	to{
		-o-transform: rotate(0deg)
	}
}
@keyframes rotateL{
	from{
		transform: rotate(360deg);
	}
	to{
		transform: rotate(0deg);
	}
}

body{
	background: #fbff419;
}
